<template>
    <div id="app">
        <!-- 使用 Element Plus 的布局组件 -->

        <el-container class="common-layout">
            <el-header class="header" height="38px">
                <div class="header-content">
                    <div class="header-left">
                        <div class="header-title">MACC</div>
                    </div>
                </div>
                <div class="header-right">
                    <!-- 切换主题按钮 -->
                    <el-button
                        @click="toggleisDark"
                        :icon="isDark ? Sunny : Moon"
                        active-color="#2c3e50"
                        inactive-color="#f39c12"
                        size="small"
                    />
                    <!-- 最小化按钮 -->
                    <el-button size="small" @click="minimize">
                        <el-icon><Minus /></el-icon>
                    </el-button>
                    <!-- 最大化/恢复按钮 -->
                    <el-button size="small" @click="maximize">
                        <el-icon><FullScreen /></el-icon>
                    </el-button>
                    <!-- 关闭按钮 -->
                    <el-button size="small" @click="close">
                        <el-icon><Close /></el-icon>
                    </el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside :width="isCollapsed ? '64px' : '140px'">
                    <!-- Logo 区域 -->
                    
                    <!-- <div class="logo-container">
                        <div v-if="!isCollapsed" class="logo-text">MACC</div>
                        <div v-else class="logo-mini">M</div>
                    </div> -->

                    <!-- 导航菜单 -->
                    <el-menu
                        :default-active="$route.path"
                        :collapse="isCollapsed"
                        :background-color="isDark ? '#1a1a1a' : '#ffffff'"
                        :text-color="isDark ? '#aaa' : '#aaa'"
                        :active-text-color="isDark ? '#ffffff' : '#000000'"
                        router
                    >
                        <el-menu-item index="/">
                            <el-icon>
                                <House />
                            </el-icon>
                            <template #title>首页</template>
                        </el-menu-item>
                        <el-menu-item index="/logs">
                            <el-icon>
                                <Document />
                            </el-icon>
                            <template #title>日志管理</template>
                        </el-menu-item>
                        <el-menu-item index="/about">
                            <el-icon>
                                <InfoFilled />
                            </el-icon>
                            <template #title>关于</template>
                        </el-menu-item>
                    </el-menu>

                    <!-- 左下角按钮区域 -->
                    <div class="collapse-button-container">
                        <!-- 侧边栏伸缩按钮 -->
                        <el-button
                            @click="toggleCollapse"
                            type="primary"
                            :icon="isCollapsed ? ArrowRight : ArrowLeft"
                            circle
                            size="small"
                        />
                    </div>
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import { House, InfoFilled, ArrowRight, ArrowLeft, Moon, Sunny, Document } from '@element-plus/icons-vue'
import { Minus, FullScreen, Close } from '@element-plus/icons-vue'

const router = useRouter()

// 侧边栏折叠状态
const isCollapsed = ref(true)
const isDark = ref(true)

// 暗黑模式状态
const toggleisDark = () => {
    isDark.value = !isDark.value
}

// 切换侧边栏折叠状态
const toggleCollapse = () => {
    isCollapsed.value = !isCollapsed.value
}

// 监听暗黑模式状态变化，并持久化到 localStorage
watchEffect(() => {
    // 从 localStorage 读取初始状态
    if (typeof window !== 'undefined') {
        const savedDarkMode = localStorage.getItem('isDark')
        if (savedDarkMode !== null) {
            isDark.value = JSON.parse(savedDarkMode)
        }
    }
})

watchEffect(() => {
    // 保存状态到 localStorage
    if (typeof window !== 'undefined') {
        localStorage.setItem('isDark', JSON.stringify(isDark.value))

        // 根据暗黑模式状态切换 HTML 类
        const html = document.documentElement
        if (isDark.value) {
            html.classList.add('dark')
        } else {
            html.classList.remove('dark')
        }
    }
})

// 窗口操作函数
const minimize = () => { window.electronAPI.minimize() }
const maximize = () => { window.electronAPI.maximize() }
const close = () => { window.electronAPI.close() }


</script>

<style lang="scss">
#app {
    height: 100vh;
    width: 100vw;
    display: flex;
}

html {
    overflow-x: hidden;
    overflow-y: hidden;
}

div {
    overflow: hidden;
}
header.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-app-region: drag;
    button {
        -webkit-app-region: no-drag;
    }
}
.common-layout {
    height: 100vh;

    .el-aside {
        background-color: #ffffff;
        /* 亮色模式下的背景色改为白色 */
        color: #333333;
        /* 亮色模式下的文字颜色改为深灰色 */
        transition: width 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;

        .logo-container {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #e0e0e0;
            /* 亮色模式下的边框 */
            user-select: none;
            /* 禁止文字选择 */

            .logo-text {
                font-size: 20px;
                font-weight: bold;
                letter-spacing: 2px;
            }

            .logo-mini {
                width: 32px;
                height: 32px;
                background-color: #000000;
                /* 亮色模式下mini logo背景色改为黑色 */
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                /* 亮色模式下mini logo文字颜色改为白色 */
                font-weight: bold;
                font-size: 16px;
                user-select: none;
                /* 禁止文字选择 */
            }
        }

        .el-menu {
            width: 100%;
            flex-grow: 1;
            border-right: none;
            background-color: transparent;
            user-select: none;
            /* 禁止文字选择 */

            .el-menu-item {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50px;
                line-height: 50px;
                margin: 0;
                text-align: center;
                user-select: none;
                /* 禁止文字选择 */
            }
        }

        .collapse-button-container {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-top: 1px solid #e0e0e0;
            /* 亮色模式下的边框 */
        }

        .el-button {
            border: none;
            transition: all 0.5s ease;
            border-radius: 100px;
        }
    }

    .el-main {
        background-color: #f8f9fa;
        color: #2c3e50;
        padding: 4px;
    }
}

/* 暗黑模式样式 */
html.dark {
    .common-layout {
        .el-aside {
            background-color: #1a1a1a;
            /* 暗黑模式下的背景色改为深黑色 */
            color: #e0e0e0;
            /* 暗黑模式下的文字颜色改为浅灰色 */
            user-select: none;
            /* 禁止文字选择 */

            .logo-container {
                border-bottom: 1px solid #333333;
                /* 暗黑模式下的边框改为深灰色 */
            }

            .collapse-button-container {
                border-top: 1px solid #333333;
                /* 暗黑模式下的边框改为深灰色 */
            }
        }

        .el-header {
            background-color: #1a1a1a;
            color: #ecf0f1;
            border-bottom-color: #333;
        }

        .el-main {
            background-color: #121212;
            color: #ecf0f1;
        }
    }
}
.header-right {
    display: flex;
    align-items: center;
    .el-button {
        border: none;
    }
}
</style>
